<template>
  <view class="tab-container">
    <scroll-view scroll-x class="scroll-view" :show-scrollbar="false" enhanced>
      <view class="tab-wrapper">
        <view
          class="tab-item"
          v-for="(item, index) in list"
          :key="index"
          :class="{ active: current === index }"
          @tap="onChange(index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss" scoped>
.tab-container {
  background: #fff;
  width: 100%;
  
  .scroll-view {
    width: 100%;
    white-space: nowrap;
  }
  
  .tab-wrapper {
    display: flex;
    padding: 0 20rpx;
  }
  
  .tab-item {
    position: relative;
    display: inline-block;
    padding: 0 30rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #666;
    flex-shrink: 0;
    
    &.active {
      color: #7d83da;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 6rpx;
        transform: translateX(-50%);
        width: 40rpx;
        height: 5rpx;
        background: #7d83da;
        border-radius: 2rpx;
      }
    }
  }
}
</style>

<script setup>
defineProps({
  list: {
    type: Array,
    default: () => []
  },
  current: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['change']);

const onChange = (index) => {
  emit('change', { index });
};
</script>
